<!-- 仪表盘组件，用于显示车辆状态信息 -->
<template>
  <div class="gauge-container">
    <div ref="chartContainer" class="chart-container"></div>
    <div class="info-label-container">
      <InfoLabel />
      <ButtonBlock />
    </div>
  </div>
</template>

<script setup lang="ts">
// 引入必要的Vue和ECharts依赖
import { ref, onMounted, onBeforeUnmount } from 'vue';
import type { EChartsType } from 'echarts';
import { initGaugeChart } from './gaugeChart';
import InfoLabel from '@/components/InfoLabel.vue';
import ButtonBlock from '@/components/ButtonBlock.vue';
// 定义图表容器引用
const chartContainer = ref<HTMLElement | null>(null);
let myChart: EChartsType | null = null;

// 组件挂载时初始化图表
onMounted(() => {
  if (chartContainer.value) {
    myChart = initGaugeChart(chartContainer.value);
  }
  // 添加窗口大小变化事件监听
  window.addEventListener('resize', () => {
    myChart?.resize();
  });
});

// 组件卸载前清理图表实例和事件监听
onBeforeUnmount(() => {
  if (myChart) {
    myChart.dispose();
    myChart = null;
  }
  window.removeEventListener('resize', () => {
    myChart?.resize();
  });
});
</script>

<style scoped>
.gauge-container {
  position: relative;
  height: 100%;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  overflow: hidden;
}

.chart-container {
  height: 100%;
  width: 100%;
}

.info-label-container {
  position: absolute;
  top: 2px;
  right: 2px;
  z-index: 10;
}
</style>
